 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">通道信息</div>
      </div>
      <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="content-con margin">
        <div class="form-item">
          <Row :gutter="24">

            <i-col span="12">
              <Form-item prop="channel_name">
                <Row>
                  <i-col span="8" class="ban-left">
                    通道名称
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.channel_name" size="large" placeholder="输入通道名称"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="api_url">
                <Row>
                  <i-col span="8" class="ban-left">
                    api地址
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.api_url" size="large" placeholder="输入 api地址"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="api_url">
                <Row>
                  <i-col span="8" class="ban-left">
                    通道费率(%)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.poundage" size="large"  placeholder="输入通道费率(%)"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="sing_fee">
                <Row>
                  <i-col span="8" class="ban-left">
                    单笔费用(/笔)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.sing_fee" size="large"  placeholder="输入单笔费用"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="poundage_model">
                <Row>
                  <i-col span="8" class="ban-left">
                    费率模式
                  </i-col>
                  <i-col span="16" style="padding-left: 15px;">
                    <Radio-group v-model="formValidate.poundage_model" size="large">
                      <Radio label="0">
                          <span>比例</span>
                      </Radio>
                      <Radio label="1">
                          <span>单笔</span>
                      </Radio>
                      <Radio label="2">
                          <span>比例+单笔</span>
                      </Radio>
                    </Radio-group>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="max_day">
                <Row>
                  <i-col span="8" class="ban-left">
                    当天最大限额(元)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.max_day" size="large" placeholder="输入当天最大限额"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="s_time">
                <Row>
                  <i-col span="8" class="ban-left">
                    交易开始时间
                  </i-col>
                  <i-col span="16">
                    <Time-picker size="large" v-model="formValidate.s_time" confirm placeholder="输入交易开始时间" style="width: 100%;"></Time-picker>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="e_time">
                <Row>
                  <i-col span="8" class="ban-left">
                    交易结束时间
                  </i-col>
                  <i-col span="16">
                    <Time-picker size="large" v-model="formValidate.e_time" confirm placeholder="输入交易结束时间" style="width: 100%;"></Time-picker>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="status">
                <Row>
                  <i-col span="8" class="ban-left">
                    通道状态

                  </i-col>
                  <i-col span="16" style="padding-left: 15px;">
                    <Radio-group v-model="formValidate.status" size="large">
                      <Radio label="0">
                          <span>开启</span>
                      </Radio>
                      <Radio label="1">
                          <span>关闭</span>
                      </Radio>
                    </Radio-group>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="risk_control">
                <Row>
                  <i-col span="8" class="ban-left">
                    风控开关
                  </i-col>
                  <i-col span="16" style="padding-left: 15px;">
                    <Radio-group v-model="formValidate.risk_control" size="large">
                      <Radio label="0">
                          <span>关闭</span>
                      </Radio>
                      <Radio label="1">
                          <span>开启</span>
                      </Radio>
                    </Radio-group>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
        </div>
        <Form-item class="ban-btn">
          <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </Form-item>
      </i-form>
   </Card>

 </template>
<script>
import { saveChannel } from '@/api/channel'
import { mapMutations } from 'vuex'
export default {
  name: 'channel-add',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
	   formValidate: {
        poundage: '',
	     channel_name: '',
        api_url: '',
	     sing_fee: '',
	     poundage_model: '0',
	     max_day: '',
	     s_time: '',
	     e_time: '',
	     status: '0',
        risk_control: '0'
	   },
	   ruleValidate: {

	     channel_name: [
	       {
	         required: true,
	         message: '输入通道名称',
	         trigger: 'blur'
	       }
	     ],
        api_url: [
          {
            required: true,
            message: '输入api地址',
            trigger: 'blur'
          }
        ],
	     sing_fee: [
	       {
	         required: true,
	         message: '输入单笔费用',
	         trigger: 'blur'
	       }
	     ],
        poundage: [
          {
            required: true,
            message: '输入通道费率',
            trigger: 'blur'
          }
        ],
	     poundage_model: [
	       {
	         required: true,
	         message: '请选择',
	         trigger: 'change'
	       }
	     ],
	     max_day: [
	       {
	         required: true,
	         message: '输入当天最大限额',
	         trigger: 'blur'
	       }
	     ],
	     s_time: [
	       {
	         required: true,
	         message: '输入交易开始时间',
	         trigger: 'blur'
	       }
	     ],
	     e_time: [
	       {
	         required: true,
	         message: '输入交易结束时间',
	         trigger: 'blur'
	       }
	     ],
	     status: [
	       {
	         required: true,
	         message: '请选择状态',
	         trigger: 'change'
	       }
	     ],
        risk_control: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ]
	    }
    }
  },
  methods: {
    // 关闭标签页
    ...mapMutations([
      'closeTag'
    ]),
    close () {
      this.closeTag({
        name: 'channel-add'
      })
    },
    // 返回按钮
    btnClick1 () {
      this.close()
    },
	 // 表单验证
	 handleSubmit () {
	   this.$refs['formValidate'].validate((valid) => {
	     if (valid) {
          saveChannel(this.formValidate).then(res => {
            this.$Message.success(res.msg)
            setTimeout(() => this.close(), 1000)
          }).catch(err => {
            this.$message.error(err.msg)
          })
	     } else {
	       this.$Message.error('表单验证失败!')
	     }
	   })
	 }
  }
}
</script>
 <style lang="less">
   .margin{
     margin-bottom: 20px !important;
   }
 </style>
